<!-- 头部组件 -->
<template>
  <div class="header-page">
    <div class="header-title">橡塑软管产线可视化</div>
  </div>
</template>
  
<script setup>
import { ref } from "vue";
</script>
  
<style scoped lang="scss">
.header-page {
  width: 100%;
  height: 113px;
  background: url("../../../assets/images/bgc-header.png") no-repeat;
  background-size: 100% 100%;
  font-family: "PangMenZhengDao";
  font-weight: 400;
  font-size: 38px;
  display: flex;
  justify-content: center;
  .header-title {
    background: linear-gradient(180deg, #ffffff 0%, #73c0ff 10%);
    -webkit-background-clip: text; /* 确保背景仅应用于文字 */
    -webkit-text-fill-color: transparent; /* 文字颜色透明以显示背景 */
    margin-top: 26px;
  }
}
</style>
  